{% extends 'movies/base.html' %}

{% block content %}
    <!-- 上部：电影基本信息 -->
    <div class="movie-info-container mb-5">
        <div class="row">
            <!-- 左侧图片轮播 (占比8) -->
            <div class="col-md-8">
                <div class="swiper movie-images">
                    <div class="swiper-wrapper">
                        {% for image in movie.images.all %}
                        <div class="swiper-slide">
                            <img src="{{ image.image.url }}" alt="{{ image.caption }}" class="img-fluid">
                        </div>
                        {% endfor %}
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>

            <!-- 右侧电影信息 (占比4) -->
            <div class="col-md-4">
                <h1>{{ movie.title }}</h1>
                <p><strong>Director:</strong> {{ movie.director }}</p>
                <p><strong>Release Date:</strong> {{ movie.release_date }}</p>
                <p><strong>Genre:</strong> {{ movie.genre }}</p>
                <p><strong>Duration:</strong> {{ movie.duration }} minutes</p>
                <p><strong>Rating:</strong> {{ movie.rating }}/10</p>
                <p>{{ movie.description }}</p>
            </div>
        </div>
    </div>

    <!-- 下部：电影链接 -->
    <div class="movie-links-container">
        <h2>Related Links</h2>
        <div class="link-types mb-3">
            <button class="btn btn-outline-primary filter-link active" data-type="stream">Streaming</button>
            <button class="btn btn-outline-primary filter-link" data-type="download">Download</button>
            <button class="btn btn-outline-primary filter-link" data-type="info">Information</button>
            <button class="btn btn-outline-primary filter-link" data-type="social">Social Media</button>
        </div>

        <div id="links-content">
            {% include 'movies/links_partial.html' with links=movie.links.all %}
        </div>
    </div>
{% endblock %}
